<template>
    <div>
        <!-- 轮播图 -->
        <mt-swipe :auto="4000">
            <mt-swipe-item v-for="(item,i) in lunbotu" :key="i">
                <img :src="item.img" alt="">

            </mt-swipe-item>
            <!-- <mt-swipe-item>2</mt-swipe-item>
            <mt-swipe-item>3</mt-swipe-item> -->
        </mt-swipe>

    </div>
</template>
<script>
export default {
    data(){
        return{
            lunbotu:[]
        }
    },
    created(){
        this.getLunbotu()
    },
    methods:{
        async getLunbotu() {
            //获取轮播图的方法
            const {data} =  await this.$http.get("/api/getLunbo")   
            console.log(data);
            if (data.status === 0 )this.lunbotu = data.messages;
        }
    }
}
</script>

<style lang="scss" scoped>
    .mint-swipe {
        height: 180px;
    }

    .mint-swipe-item {
        img {
            width: 100%;
            height: 100%;
        }
        &:nth-child(1){
            background-color: red;
        }
        &:nth-child(2){
            background-color: blue;
        }
        &:nth-child(3) {
            background-color:gold;
        }
    }
</style>
